<template>
	<Navbar pageName="搜索" :top="16" bgColor="#fff">
		<template #area>
			<up-search bgColor="#F7F7F7" placeholder="王氏大闸蟹" :showAction="false" shape="square" height="44"
				@click="toSearch"></up-search>
			<up-line color="#cfcfcf" margin="26px 0"></up-line>
			<view class="hot">
				<view class="f-w-b f-s-14">热门搜索</view>
				<view class="hot_tag">
					<block v-for="item in 6">
						<view class="tag">王氏大闸蟹</view>
					</block>
				</view>
			</view>
			<view class="brand">
				<view class="f-w-b f-s-14">品牌推荐</view>
				<view class="brand_tag">
					<block v-for="item in 6">
						<BrandItem />
					</block>
				</view>
			</view>
		</template>
	</Navbar>
</template>

<script setup>
	import {
		ref,
	} from 'vue';
	import Navbar from '@/components/Navbar.vue';
	import BrandItem from '@/components/BrandItem.vue';
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.hot {
		.hot_tag {
			//grid布局
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-gap: 16px;
			margin-top: 16px;

			.tag {
				background-color: #f8f8f8;
				//字间距
				letter-spacing: 1px;
				padding: 12px 16px;
				text-align: center;
				font-size: 12px;
				color: #000;
			}
		}
	}

	.brand {
		margin-top: 40px;

		.brand_tag {
			//grid布局
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-gap: 16px;
			margin-top: 16px;
		}
	}
</style>